<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="libs/zepto/zepto.min.js"></script>
<script type="text/javascript" src="libs/swipe/swiper.min.js"></script>
<script type="text/javascript" src="libs/common/picker.js"></script>
<script type="text/javascript" src="libs/common/select.js"></script>
<script type="text/javascript" src="libs/common/lrz.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>

<div data-role="page" id="mainPage">
    <div data-role="header" data-position="fixed">
        <h1></h1>
    </div>
    <div data-role="content" class="page">
        <div class="btns" id="showCertificate">
            <span id="certificatePath" style="display: none;"></span>
            <span id="certificate">&nbsp;</span>
            <input type="file" accept="image/jpg" name="file" id="uploadPhoto"/>
            <br/>
        </div>
    </div>
</div>
<script type="text/javascript">
    document.querySelector('input').addEventListener('change', function () {
        var that = this;
        lrz(that.files[0], {width: 750})
            .then(function (rst) {
                var submitData = {
                    type: 2,
                    file: rst.base64,
                    name: rst.origin.name,
                    fileLength: rst.base64.length
                };
                $.ajax({
                    type: "POST",
                    url: "/api/image/upload2",
                    data: submitData,
                    dataType: "json",
                    beforeSend: function (XMLHttpRequest) {
                        //showLoader();
                    },
                    success: function (data) {
                        alert(JSON.stringify(data));
                    },
                    complete: function (XMLHttpRequest, textStatus) {
                        hideLoader();
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("上传失败");
                    }
                });
//alert(rst.base64);
                return rst;
            });
    });


    function showLoader() {
        //显示加载器.for jQuery Mobile 1.2.0  以上
        /* $.mobile.loading('show', {
         text: '正在提交数据', //加载器中显示的文字
         textVisible: true, //是否显示文字
         theme: 'a',        //加载器主题样式a-e
         textonly: false,   //是否只显示文字
         html: ""           //要显示的html内容，如图片等，默认使用Theme里的ajaxLoad图片
         });   */
        alert('正在上传');
    }
    function hideLoader() {
        // 隐藏加载器
        $.mobile.loading('hide');
    }
</script>

</body>
</html>